import React from 'react';
import { Heart, Frown, Angry, Zap, Smile, Meh } from 'lucide-react';
import type { MoodAnalysis } from '../types';

interface MoodDisplayProps {
  mood: MoodAnalysis | null;
  isLoading: boolean;
}

const emotionIcons = {
  joy: Smile,
  sadness: Frown,
  anger: Angry,
  fear: Zap,
  surprise: Zap,
  neutral: Meh
};

const emotionColors = {
  joy: '#FFD700',
  sadness: '#4A90E2',
  anger: '#FF6B6B',
  fear: '#8E44AD',
  surprise: '#FF9500',
  neutral: '#95A5A6'
};

const emotionLabels = {
  joy: '快乐',
  sadness: '悲伤',
  anger: '愤怒',
  fear: '恐惧',
  surprise: '惊讶',
  neutral: '平静'
};

export const MoodDisplay: React.FC<MoodDisplayProps> = ({ mood, isLoading }) => {
  if (isLoading) {
    return (
      <div className="mood-display loading">
        <div className="loading-indicator">
          <Heart className="icon-pulse" size={32} />
          <p>正在分析情绪...</p>
        </div>
      </div>
    );
  }

  if (!mood) {
    return (
      <div className="mood-display empty">
        <p className="hint">输入文字，我将分析其中的情绪</p>
      </div>
    );
  }

  const IconComponent = emotionIcons[mood.emotion as keyof typeof emotionIcons] || Meh;
  const color = emotionColors[mood.emotion as keyof typeof emotionColors] || '#95A5A6';
  const label = emotionLabels[mood.emotion as keyof typeof emotionLabels] || '未知';

  return (
    <div className="mood-display">
      <div className="mood-main">
        <div className="mood-icon" style={{ color }}>
          <IconComponent size={48} />
        </div>
        <div className="mood-info">
          <h3 className="mood-emotion">{label}</h3>
          <p className="mood-description">{mood.description}</p>
        </div>
      </div>
      
      <div className="mood-details">
        <div className="mood-metric">
          <span className="metric-label">强度</span>
          <div className="progress-bar">
            <div 
              className="progress-fill" 
              style={{ 
                width: `${mood.intensity * 100}%`,
                backgroundColor: color
              }}
            />
          </div>
          <span className="metric-value">{Math.round(mood.intensity * 100)}%</span>
        </div>
        
        <div className="mood-metric">
          <span className="metric-label">置信度</span>
          <div className="progress-bar">
            <div 
              className="progress-fill" 
              style={{ 
                width: `${mood.confidence * 100}%`,
                backgroundColor: '#28A745'
              }}
            />
          </div>
          <span className="metric-value">{Math.round(mood.confidence * 100)}%</span>
        </div>
      </div>

      {mood.keywords.length > 0 && (
        <div className="mood-keywords">
          <span className="keywords-label">关键词：</span>
          <div className="keywords-list">
            {mood.keywords.map((keyword, index) => (
              <span key={index} className="keyword-tag">
                {keyword}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};